<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }
        #all{
            width: 300px;
            height: 500px;
            background: #94959b;
           padding-top: 65px;
            margin: 50px auto;
            text-align: center;
        }
        #but{
            position: relative;
            width: 300px;
            height: 300px;
            background: #2c2f34;
            margin-top:50px;
          
        }
        .but1{
            width: 100px;
            height: 100px;
            text-align: center;
            position: absolute;
            top: 10px;
            left: 97px;
            font-size: 50px;
            border: 1px solid #000;
        }
        .but1:hover{
            text-shadow: 2px 2px 10px rgba(153,11,255,.5);
            transform:scale(1.1);
        }
        .but2{
            width: 100px;
            height: 100px;
            text-align: center;
            position: absolute;
            bottom: 10px;
            left: 97px;
            font-size: 50px;
            border: 1px solid #000;
        }
        .but2:hover{
            text-shadow: 2px 2px 10px rgba(153,11,255,.5);
            transform:scale(1.1);
        }
        #box{
            position: relative;
            width: 300px;
            height: 300px;
            background: #2c2f34;
            margin-top:50px; 
        }
        #box button{
            width: 70px;
            height: 61px;
            text-align: center;
            font-size: 50px;
            border: 1px solid #000;
            margin-left: 10px;
            margin-top: 10px;
        }
        #box button:hover{
            text-shadow: 2px 2px 10px rgba(153,11,255,.5);
            transform:scale(1.1);
        } 
    </style>
</head>
<body>
    <div id="all">
        <div id="but" v-show='shop'>
            <button class="but1" @click='add'>↑</button>
            <button class="but2" @click='dowm'>↓</button>
        </div>
        <div id="box" v-show='pg'>
            <button  class="one" @click='lou'>1</button>
            <button  class="two" @click='lou1'>2</button>
            <button  class="ther" @click='lou2'>3</button>
            <button  class="four" @click='lou3' >4</button>
            <button  class="five" @click='lou4'>5</button>
            <button  class="six" @click='lou5'>6</button>
            <button  class="seven" @click='lou6'>7</button>
            <button class="eight" @click='lou7'>8</button>
            <button  class="nine" @click='lou8'>9</button>
            <button  class="ten" @click='lou9'>10</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>">
        <script>
            var app = new Vue({
                el:"#all",
                data:{
                    top:1,
                    shop:true,
                    pg:false,
                    text:[
                        '你已到达1层',
                        '你已到达2层',
                        '你已到达3层',
                        '你已到达4层',
                        '你已到达5层',
                        '你已到达6层',
                        '你已到达7层',
                        '你已到达8层',
                        '你已到达9层',
                        '你已到达10层'
                    ]
                },
                methods:{
                    add:function(){
                       this.shop =! this.shop;
                       this.pg =! this.pg;
                    },
                    dowm:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                    },
                    lou:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[0])
                    },
                    lou1:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[1])
                    },
                    lou2:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[2])
                    },
                    lou3:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[3])
                    },
                    lou4:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[4])
                    },
                    lou5:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[5])
                    },
                    lou6:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[6])
                    },
                    lou7:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[7])
                    },
                    lou8:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[8])
                    },
                    lou9:function(){
                        this.shop =! this.shop;
                        this.pg =! this.pg;
                        alert(this.text[9])
                    }
                }
            })
        </script>
</body>
</html>